const path = require("path");
// const px2rem = require("postcss-pxtorem");
const autoprefixer = require("autoprefixer");

const isProd = process.env.NODE_ENV === "production";
const resolve = (_path) => path.resolve(__dirname, _path);

module.exports = {
  devServer: {
    port: 8081,
    host: "0.0.0.0",
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    // proxy: "http://192.168.110.228:8087",
    proxy: {
      // 代理
      // "/foo": "http://localhost:4567/", //代理方式 /foo --> http://localhost:4567/foo
      // 选项写法
      // "/api": {
      //   target: "http://123.456.com", //代理方式 /api --> http://123.456.com
      //   changeOrigin: true,
      //   rewrite: (path) => path.replace(/^\/api/, ""),
      // }
      //
      "/api": {
        target: "http://172.16.88.63:8099",
        changeOrigin: true,
      },
    },
    open: true, // 启动时自动打开浏览器
    hot: true, // 启用热更新
    hotOnly: true, // 热更新无效时，是否刷新页面
    overlay: {
      warnings: false,
      errors: true,
    },
  },
  lintOnSave: false,
  productionSourceMap: isProd ? false : true,
  // publicPath: "/frdist/", //isProd ? "/" : `/`,
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8",
              "last 10 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true,
          }),
          // px2rem({
          //   rootValue: 37.5,
          //   propList: ["*"], // 是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
          //   unitPrecision: 4, // 保留rem小数点多少位
          //   selectorBlackList: ["antd"], // 则是一个对css选择器进行过滤的数组
          //   replace: true,
          //   mediaQuery: false, // 媒体查询(@media screen 之类的)中不生效
          //   minPixelValue: 12, // px小于12的不会被转换
          //   exclude: /node_modules/,
          // }),
        ],
      },
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        // 配置别名
        "@@": resolve("./"),
        "@": resolve("./src"),
        // '@api': resolve('./src/api'),
        "@assets": resolve("./src/assets"),
        // '@enum': resolve('./src/enum'),
        // '@components': resolve('./src/components'),
        // '@hooks': resolve('./src/hooks'),
        "@pages": resolve("./src/pages"),
        // '@store': resolve('./src/store'),
        "@utils": resolve("./src/utils"),
      },
    },
  },
};

